<template>
    <div class="chartContent">
        <el-select
            v-model="value"
            class="chartSelect"
            placeholder="本月完成投资"
            @change="fn"
        >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        <div id="line"></div>
    </div>
</template>

<script>
    import echarts from "echarts";

    export default {
        props: ["info"],
        data() {
            return {
                value: "本月完成投资",
                aa: {},
                options: [
                    {
                        value: "本月完成投资",
                        label: "本月完成投资",
                    },
                    {
                        value: "计划完成率",
                        label: "计划完成率",
                    },
                ],
                charts: {
                    names: [],
                    lineX: [],
                    value: [[], []],
                },
            };
        },
        methods: {
            fn() {
                var myChart = echarts.init(document.getElementById("line"));
                //   console.log("this.info", this.info);
                this.aa = this.info;
                this.charts.names = this.aa.map((item) => {
                    // console.log(item);
                    return item.年份.toString();
                });
                this.charts.lineX = this.aa.map((i) => {
                    return i.数据.map((item) => {
                        return item.月份 + `月`;
                    });
                });
                if (this.value == "本月完成投资") {
                    console.log(1);
                    this.charts.value[0] = this.aa[0].数据.map((item) => {
                        return item.本月完成投资;
                    });
                    this.charts.value[1] = this.aa[1].数据.map((item) => {
                        return item.本月完成投资;
                    });
                } else {
                    console.log(2);
                    this.charts.value[0] = this.aa[0].数据.map((item) => {
                        return item.计划完成率;
                    });
                    this.charts.value[1] = this.aa[1].数据.map((item) => {
                        return item.计划完成率;
                    });
                }
                var color = ["rgba(23, 255, 243", "rgba(119,61,190"];
                var lineY = [];
                for (var i = 0; i < this.charts.names.length; i++) {
                    var x = i;
                    if (x > color.length - 1) {
                        x = color.length - 1;
                    }
                    var data = {
                        name: this.charts.names[i],
                        type: "line",
                        color: color[x] + ")",
                        smooth: true,
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: color[x] + ", 0.3)",
                                        },
                                        {
                                            offset: 0.8,
                                            color: color[x] + ", 0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)",
                                shadowBlur: 10,
                            },
                        },
                        symbol: "circle",
                        symbolSize: 5,
                        data: this.charts.value[i],
                    };
                    lineY.push(data);
                }
                var option = {
                    backgroundColor: "transparent",
                    title: {
                        text: "投资完成情况对比",
                        textStyle: {
                            color: "#fff",
                            fontWeight: "500",
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    legend: {
                        data: this.charts.names,
                        textStyle: {
                            fontSize: 12,
                            color: "#fff",
                        },
                        right: "50%",
                    },
                    grid: {
                        top: "20%",
                        left: "0%",
                        right: "0%",
                        bottom: "0%",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: this.charts.lineX[1],
                        axisLabel: {
                            textStyle: {
                                color: "#fff",
                            },
                            formatter: function (params) {
                                return params.split(" ")[0];
                            },
                        },
                    },
                    yAxis: {
                        name: this.charts.unit,
                        type: "value",
                        axisLabel: {
                            formatter: "{value}",
                            textStyle: {
                                color: "#fff",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#3a5170",
                            },
                        },
                    },
                    series: lineY,
                };
                myChart.setOption(option);
                let sizeFun = function () {
                    myChart.resize();
                };
                window.addEventListener("resize", sizeFun);
                setInterval(() => {
                    myChart.setOption({
                        legend: {
                            selected: {
                                出口: false,
                                入口: false,
                            },
                        },
                    });
                    myChart.setOption({
                        legend: {
                            selected: {
                                出口: true,
                                入口: true,
                            },
                        },
                    });
                }, 10000);
            },
        },
        mounted() {
            this.fn();
        },
};
</script>

<style lang="less" scoped>
.chartContent {
    position: relative;
    .chartSelect {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 28px;
        z-index: 1;
        /deep/ .el-input__wrapper {
            padding: 1px 5px;
            background-color: rgba(12, 50, 95) !important;
            color: #fff;
        }
        /deep/ .el-input__inner {
            height: 28px;
            line-height: 28px;
            font-size: 12px;
        }
    }
    #line {
        width: 8.795rem;
        height: 2.3438rem;
    }
}
</style>
